<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard Language Layouts</title>

	<!-- demo -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/demo.css" rel="stylesheet">

	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="css/jquery-ui.min.css" id="ui-theme" rel="stylesheet">
	<script src="js/jquery-latest.min.js"></script> <!-- this demo needs ajax -->
	<script src="js/jquery-ui-custom.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="../css/keyboard.css" rel="stylesheet">
	<link href="../css/keyboard-previewkeyset.css" rel="stylesheet">
	<script src="../js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="../js/jquery.mousewheel.js"></script>
	<script src="../js/jquery.keyboard.extension-typing.js"></script>
	<script src="../js/jquery.keyboard.extension-previewkeyset.js"></script>

	<!-- keyboard layout -->
	<script src="../layouts/keyboard-layouts-combined.js" charset="utf-8"></script>

	<!-- theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
	<style>
	.switcher_container { padding: 5px; }
	.switcher_list { padding: 2px; }
	.switcher_label { margin-right: 5px; }
	</style>
	<script src="js/jquery.jui_theme_switch.min.js"></script>

	<script>
	$(function(){

		$('#switcher').jui_theme_switch({
			stylesheet_link_id : 'ui-theme',
			datasource_url     : 'js/theme_switcher.json',
			listClass          : 'form-control'
		});

		var layouts = [
			// 'title , file name , layout name'
			"Albanian (qwerty), albanian, albanian-qwerty",
			"Albanian (qwertz), albanian, albanian-qwertz",
			"Arabic (azerty), arabic, arabic-azerty",
			"Arabic (qwerty-1), arabic, arabic-qwerty-1",
			"Arabic (qwerty-2), arabic, arabic-qwerty-2",
			"Arabic (qwerty-3), arabic, arabic-qwerty-3",
			"Arabic (qwerty-4), arabic, arabic-qwerty-4",
			"Belarusian (Belarus), belarusian, belarusian-qwerty",
			"Bengali (qwerty-1), bengali, bengali-qwerty-1",
			"Bengali (qwerty-2), bengali, bengali-qwerty-2",
			"Bulgarian (qwerty), bulgarian, bulgarian-qwerty",
			"Catalan (qwerty), catalan, catalan-qwerty",
			"Chinese, chinese, chinese",
			"Danish (qwerty), danish, danish-qwerty", // mmm danish
			"Ethiopic, ethiopic, ethiopic",
			"French (azerty-1), french, french-azerty-1",
			"French (azerty-2), french, french-azerty-2",
			"French (bepo v1.0rc2), french, french-bepo-V1.0rc2",
			"German (qwertz-1), german, german-qwertz-1",
			"German (qwertz-2), german, german-qwertz-2",
			"Hebrew (qwerty), hebrew, hebrew-qwerty",
			"Hindi, hindi, hindi",
			"Magyar (qwertz-1) utf8, hungarian, hungarian-qwertz-1",
			"Magyar (qwertz-2) utf8, hungarian, hungarian-qwertz-2",
			"Magyar (qwertz-1) ansi, hungariansi, hungarianansi-qwertz-1",
			"Magyar (qwertz-2) ansi, hungariansi, hungarianansi-qwertz-2",
			"Japanese (kana), japanese, japanese-kana",
			"Japanese (qwerty), japanese, japanese-qwerty",
			"Latvian (qwerty), latvian, latvian-qwerty",
			"Mongolian, mongolian, mongolian",
			"Persian (Farsi), persian, Persian",
			"Polish (qwerty), polish, polish-qwerty",
			"Portuguese (qwerty), portuguese, portuguese-qwerty",
			"Romanian (qwerty), romanian, romanian",
			"Russian (qwerty), russian, russian-qwerty",
			"Russian (mac), russian, russian-mac",
			"Serbian Cyrillic (sr-Cyrl), serbian, sr-Cyrl",
			"Serbian Latin (sr), serbian, sr",
			"Serbian Cyrillic Keyboard Layout (српски) for Mac, serbian, sr-Cyrl-mac",
			"Serbian Latin Keyboard Layout (Srpski) for Mac, serbian, sr-mac",
			"Spanish (qwerty), spanish, spanish-qwerty",
			"Spanish (qwerty) special, spanish, spanish-qwerty-sp",
			"Swedish (qwerty), swedish, swedish-qwerty",
			"Swedish (dvorak), swedish, swedish-dvorak",
			"Tamil (qwerty), tamil, tamil-tamil99-mod",
			"Thai (qwerty), thai, thai-qwerty",
			"Turkish (q), turkish, turkish-q",
			"Turkish (f), turkish, turkish-f",
			"Vietnamese (qwerty), vietnamese, vietnamese-qwerty"
		],

		t, o = '',

		// Change display language, if the definitions are available
		showKb = function(layout){
			var kb = $('#multi').getkeyboard();
			kb.options.layout = layout;
			// redraw keyboard with new layout
			kb.redraw();
		};

		$.each(layouts.sort(), function(i, l){
			t = l.split(/\s*,\s*/);
			o += '<option data-filename="' + t[1] + '" value="' + t[2] + '">' + t[0] + '</option>';
		});

		// allow theme selector to set up, otherwise it pushes the page down after the
		// keyboard has opened and covers up the <h2> layout title
		setTimeout(function(){
			$('#multi').keyboard({
				layout: 'qwerty',
				stayOpen: true
			})
			// activate the typing extension
			.addTyping({
				showTyping: true,
				delay: 50
			})
			.previewKeyset();

			$('#lang')
			.html(o)
			.change(function(){
				var kb = $('#multi'),
					$this = $(this),
					$opt = $this.find('option:selected'),
					layout = $this.val();
				$('h2').text( $opt.text() );
				showKb( layout );
			}).trigger('change');

		}, 100);

	});
	</script>
	<style>
	.rtl {
		text-align: right;
	}
	</style>
</head>
<body>

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" name="top">
				<span class="fa fa-keyboard-o fa-lg"></span>
			</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="../index.html">Home</a></li>
				<li><a href="basic.html">Basic</a></li>
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Layouts <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li class="active"><a href="layouts.html">Standard <span class="sr-only">(current)</span></a></li>
						<li><a href="layouts2.html">Greywyvern</a></li>
						<li><a href="layouts3.html">Microsoft Keyboard</a></li>
						<li><a href="calculator.html"><span class="fa fa-calculator fa-lg"></span> Calculator</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extensions <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="altkeys-popup.html">Alt-keys</a></li>
						<li><a href="../index.html#autocomplete">Autocomplete</a></li>
						<li><a href="../index.html#caret">Caret</a></li>
						<li><a href="extender.html">Extender</a></li>
						<li><a href="preview-keyset.html">Keyset</a></li>
						<li><a href="mobile.html">Mobile</a></li>
						<li><a href="jquery-mobile-1.4.html">Mobile v1.4</a></li>
						<li><a href="navigate.html">Navigate</a></li>
						<li><a href="scramble.html">Scramble</a></li>
						<li><a href="../index.html#typing">Typing</a></li>
					</ul>
				</li>
				<li><a href="https://jsfiddle.net/Mottie/egb3a1sk/"><span class="fa fa-flask fa-lg"></span> Playground</a></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="https://github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>
				<li><a href="https://github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>
					<li><a href="https://github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>
					<li><a href="https://github.com/Mottie/Keyboard/issues"><span class="fa fa-bug fa-lg" title="Issues"></span></a></li>
			</ul>

		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<div id="page-wrap">

	<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Language Layouts</a></h1>
	<h3>"keyboard-layouts-combined.js"</h3>
	<h4>This is a work in progress.</h4>

	<div id="switcher"></div>
	<br>
	<div class="block2">
		<div class="row">
			<div class="col-xs-4"></div>
			<div class="col-xs-4">
				<select class="form-control" id="lang"></select>
				<div style="height: 50px;"></div>
			</div>
		</div>

		<h2></h2>
		<input id="multi" type="text" />
	</div>
	<br class="clear" />

	<div id="footer2">
		<div>
			If you find any errors, please submit an <a href="https://github.com/Mottie/Keyboard/issues">issue</a>.<br>
			Or if you would like to contribute a layout, please email me at <a href="%6D%61%69%6C%74%6F%3Aw%6Fwm%6Ftty%40g%6Dail%2Ec%6Fm">wowmotty a&#116; &#103;&#109;&#97;&#105;&#108; d&#111;t c&#111;m</a>
		</div>
	</div>

</div>

</body>
</html>
